<template>
  <div>
    <!-- 支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。 -->
    <el-table
      row-key="id"
      :tree-props="{ children: 'children' }"
      :data="menuList"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="catename" label="分类名称" width="180">
      </el-table-column>
      <el-table-column label="分类图片">
        <template slot-scope="item">
          <!-- 地址需要补充完整 -->
          <img v-if="item.row.img" width="100" :src="$host+item.row.img">
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="item">
          <div>
            <el-button type="info" size="mini" @click="edit(item.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="delItem(item.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//引入封装好的接口
import { getCateList, menuDel } from "../../util/request/api";
export default {
  data() {
    return {
      menuList: [],
    };
  },
  methods: {
    //封装一个编辑事件
    edit(row) {
      // 子传父的第二个数据，row是整个菜单的数据
      this.$emit("edit", row);
    },
    // 获取列表中的数据
    getList() {
      //页面一加载就调用接口
      getCateList({
        istree: true,
      }).then((res) => {
        console.log(res, "菜单列表");
        if (res.code == 200) {
          this.menuList = res.list;
        }
      });
    },
    // 删除一项
    delItem(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 真的删除
          menuDel({ id: id }).then((res) => {
            if (res.code === 200) {
              // 后台返回的数据中包含最新数据，所以不用再发请求，直接用res
              this.menuList = res.list;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped></style>
